<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Color Themes</div>
        <div class="title-large">
          <div class="title-large-text">Color Themes</div>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title block-title-medium">Layout Themes</div>
      <div class="block block-strong">
        <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
        <div class="row">
          <div class="col-50 bg-color-white demo-theme-picker" @click=${()=>setLayoutTheme('light')}>
            ${theme === 'light' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
          <div class="col-50 bg-color-black demo-theme-picker" @click=${()=>setLayoutTheme('dark')}>
            ${theme === 'dark' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
        </div>
      </div>
      <div class="block-title block-title-medium">Navigation Bars Style</div>
      <div class="block block-strong">
        <p>Switch navigation bars to filled style:</p>
        <div class="row">
          <div class="col-50 demo-bars-picker demo-bars-picker-empty" @click=${()=>setBarsStyle('empty')}>
            <div class="demo-navbar"></div>
            ${barsStyle === 'empty' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
          <div class="col-50 demo-bars-picker demo-bars-picker-fill" @click=${()=>setBarsStyle('fill')}>
            <div class="demo-navbar"></div>
            ${barsStyle === 'fill' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
        </div>
      </div>
      <div class="block-title block-title-medium">Default Color Themes</div>
      <div class="block block-strong">
        <p>Framework7 comes with ${colors.length} color themes set.</p>
        <div class="row">
          ${colors.map((color) => $h`
          <div class="col-33 medium-25 large-20">
            <button class="button button-fill demo-color-picker-button button-round button-small color-${color}"
              @click=${()=>setColorTheme(color)}>${color}</button>
          </div>
          `)}
          <div class="col-33 medium-25 large-20"></div>
          <div class="col-33 medium-25 large-20"></div>
          <div class="col-33 medium-25 large-20"></div>
        </div>
      </div>
      <div class="block-title block-title-medium">Custom Color Theme</div>
      <div class="list">
        <ul>
          <li class="item-content item-input">
            <div class="item-media align-self-flex-end">
              <div id="color-theme-picker-color"
                style="width: 28px; height: 28px; border-radius: 4px; background: var(--f7-theme-color)"></div>
            </div>
            <div class="item-inner">
              <div class="item-label">HEX Color</div>
              <div class="item-input-wrap">
                <input id="color-theme-picker" type="text" readonly placeholder="e.g. #ff0000" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title block-title-medium">Generated CSS Variables</div>
      <div class="block block-strong">
        ${customProperties && $h`
        <p>Add this code block to your custom stylesheet:</p>
        <pre
          style="overflow: auto; -webkit-overflow-scrolling: touch; margin: 0; font-size: 12px;">${customProperties}</pre>
        `}
        ${!customProperties && $h`
        <p>Change navigation bars styles or specify custom color to see custom CSS variables here</p>
        `}
      </div>
    </div>
  </div>
</template>
<script>
  var stylesheet;
  var globalTheme = 'light';
  var globalBarsStyle = 'empty';
  var globalCustomColor = '';
  var globalCustomProperties = '';

  export default (props, { $f7, $, $on, $onMounted, $update }) => {
    const colors = [
      'red',
      'green',
      'blue',
      'pink',
      'yellow',
      'orange',
      'purple',
      'deeppurple',
      'lightblue',
      'teal',
      'lime',
      'deeporange',
      'gray',
      'black',
    ];
    let theme = globalTheme;
    let barsStyle = globalBarsStyle;
    let customColor = globalCustomColor;
    let customProperties = globalCustomProperties;
    let themeColor = globalCustomColor || $('html').css('--f7-theme-color').trim();

    let colorPicker;

    const generateStylesheet = () => {
      var styles = '';
      if (customColor) {
        const colorThemeProperties = $f7.utils.colorThemeCSSProperties(customColor);
        if (Object.keys(colorThemeProperties).length) {
          styles += `
/* Custom color theme */
:root {
  ${Object.keys(colorThemeProperties)
              .map(key => `${key}: ${colorThemeProperties[key]};`)
              .join('\n  ')}
}`;
        }
      }
      if (barsStyle === 'fill') {
        const colorThemeRgb = $('html').css('--f7-theme-color-rgb').trim().split(',').map(c => c.trim());
        styles += `
/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-link-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
}

.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;

  --r: ${colorThemeRgb[0]};
  --g: ${colorThemeRgb[1]};
  --b: ${colorThemeRgb[2]};
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}
          `;
      }
      return styles.trim();
    }
    const setLayoutTheme = (newTheme) => {
      var $html = $('html');
      globalTheme = newTheme;
      $html.removeClass('theme-dark theme-light').addClass('theme-' + globalTheme);
      theme = globalTheme;
      $update();
    }
    const setColorTheme = (newColor) => {
      var $html = $('html');
      var currentColorClass = $html[0].className.match(/color-theme-([a-z]*)/);
      if (currentColorClass) $html.removeClass(currentColorClass[0])
      $html.addClass('color-theme-' + newColor);
      unsetCustomColor();
      themeColor = $html.css('--f7-color-' + newColor).trim();
      colorPicker.setValue({
        hex: themeColor,
      });
      $update();
    }
    const setBarsStyle = (newBarsStyle) => {
      globalBarsStyle = newBarsStyle;
      barsStyle = globalBarsStyle;

      globalCustomProperties = generateStylesheet();
      stylesheet.innerHTML = globalCustomProperties;
      customProperties = globalCustomProperties;
      $update();
    }
    const unsetCustomColor = (defaultColor) => {
      globalCustomColor = '';
      customColor = '';
      globalCustomProperties = generateStylesheet();
      stylesheet.innerHTML = globalCustomProperties;
      customProperties = globalCustomProperties;
      $update();
    }
    const setCustomColor = (newColor) => {
      globalCustomColor = newColor;
      customColor = globalCustomColor;
      globalCustomProperties = generateStylesheet();
      stylesheet.innerHTML = globalCustomProperties;
      customProperties = globalCustomProperties;
      $update();
    }

    $onMounted(() => {
      if (!stylesheet) {
        stylesheet = document.createElement('style');
        document.head.appendChild(stylesheet);
      }
    })
    $on('pageInit', () => {
      let timeout;
      colorPicker = $f7.colorPicker.create({
        inputEl: '#color-theme-picker',
        targetEl: '#color-theme-picker-color',
        value: {
          hex: themeColor,
        },
        on: {
          change(cp, value) {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
              if (themeColor === value.hex) return;
              setCustomColor(value.hex);
            }, 200);
          },
        },
      });
    });
    $on('pageBeforeRemove', () => {
      colorPicker.destroy();
    });

    return $render;
  };

</script>
